<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2021-11-08 16:25:09
 * @LastEditors: younghxp
 * @LastEditTime: 2021-11-18 09:33:07
-->
<template>
  <div class="svgBox">
    <svg
      width="235px"
      height="38px"
      viewBox="0 0 236 38"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <title>矩形</title>
      <g
        id="保险订单-项目端"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <g id="保险订单-订单详情（待审核）" class="fillTheme">
          <g id="编组" transform="translate(0.800926, 0.000000)">
            <polygon
              id="矩形"
              points="-1.24336305e-12 0 220.509259 0 235 19.0377046 220.509259 38 -1.24336305e-12 38"
            ></polygon>
          </g>
        </g>
      </g>
      <text
        x="117"
        y="20"
        style="
          font-size: 16px;
          font-weight: 400;
          dominant-baseline: middle;
          text-anchor: middle;
        "
        fill="#fff"
      >
        1.投保信息填写
      </text>
    </svg>
    <svg
      width="235px"
      height="38px"
      viewBox="0 0 236 38"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <title>矩形</title>
      <g
        id="保险订单-项目端"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <g
          id="保险订单-订单详情（待审核）"
          :class="
            step === '2' || step === '3' || step === '4'
              ? 'fillTheme'
              : 'fillNone'
          "
          transform="translate(0.106481, 0.000000)"
        >
          <g id="流程" transform="translate(0.106481, 0.000000)">
            <g id="编组备份-2" transform="translate(0.106481, 0.000000)">
              <polygon
                id="矩形"
                points="4.19278327e-13 0 220.509259 0 235 19.0377046 220.509259 38 4.19278327e-13 38 14.4907407 19.0335027"
              ></polygon>
            </g>
          </g>
        </g>
      </g>
      <text
        x="117"
        y="20"
        style="
          font-size: 16px;
          font-weight: 400;
          dominant-baseline: middle;
          text-anchor: middle;
        "
        :fill="
          step === '2' || step === '3' || step === '4' ? '#fff' : '#bdbdbd'
        "
      >
        2.承保机构审核
      </text>
    </svg>
    <svg
      width="235px"
      height="38px"
      viewBox="0 0 236 38"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <title>矩形</title>
      <g
        id="保险订单-项目端"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <g
          id="保险订单-订单详情（待审核）"
          :class="step === '3' || step === '4' ? 'fillTheme' : 'fillNone'"
          transform="translate(0.106481, 0.000000)"
        >
          <g id="流程" transform="translate(0.106481, 0.000000)">
            <g id="编组备份-2" transform="translate(0.106481, 0.000000)">
              <polygon
                id="矩形"
                points="4.19278327e-13 0 220.509259 0 235 19.0377046 220.509259 38 4.19278327e-13 38 14.4907407 19.0335027"
              ></polygon>
            </g>
          </g>
        </g>
      </g>
      <text
        x="117"
        y="20"
        style="
          font-size: 16px;
          font-weight: 400;
          dominant-baseline: middle;
          text-anchor: middle;
        "
        :fill="step === '3' || step === '4' ? '#fff' : '#bdbdbd'"
      >
        3.监管部门审核
      </text>
    </svg>
    <svg
      width="235px"
      height="38px"
      viewBox="0 0 236 38"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <title>矩形</title>
      <g
        id="保险订单-项目端"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <g
          id="保险订单-订单详情（待审核）"
          :class="step === '4' ? 'fillTheme' : 'fillNone'"
          transform="translate(0.106481, 0.000000)"
        >
          <g id="流程" transform="translate(0.106481, 0.000000)">
            <g id="编组备份-2" transform="translate(0.106481, 0.000000)">
              <polygon
                id="矩形"
                points="4.19278327e-13 0 220.509259 0 235 19.0377046 220.509259 38 4.19278327e-13 38 14.4907407 19.0335027"
              ></polygon>
            </g>
          </g>
        </g>
      </g>
      <text
        x="117"
        y="20"
        style="
          font-size: 16px;
          font-weight: 400;
          dominant-baseline: middle;
          text-anchor: middle;
        "
        :fill="step === '4' ? '#fff' : '#bdbdbd'"
      >
        4.出具保单保函
      </text>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'newProgress',
  props: {
    step: {
      type: String,
      default: '',
    },
  },
}
</script>
<style lang="less" scoped>
.svgBox {
  font-size: 0;
  .fillTheme {
    fill: #3189ea;
  }
  .fillNone {
    fill: #f0f0f0;
  }
}
</style>
